<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QuickNav Suite - 3秒定制导航，90%操作提速</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/daily-quote.css">
</head>
<body>
  <div class="app">
    <canvas id="particle-canvas" class="particle-background"></canvas>
    
    <header class="header">
      <div class="header-left">
        <div class="logo">
          <div >
            <img src="assets/icon.png" class="logo-icon" alt="AI Nav Logo">
          </div>
          <div class="logo-text">
            <span class="logo-title">QuickNav Suite</span>
            <span class="logo-subtitle">3秒定制导航，90%操作提速</span>
          </div>
        </div>
      </div>
      
      <div class="header-right">
        <button class="btn btn-ghost" id="share-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
          <span>共享大厅</span>
        </button>
        <button class="btn btn-ghost" id="bookmarks-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path></svg>
          <span>书签</span>
        </button>
        <button class="btn btn-ghost" id="history-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
          <span>历史</span>
        </button>
        <button class="btn btn-outline" id="add-nav-btn">
          <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1620">
            <path d="M123.92 555.9a32 32 0 0 1-14.82-60.38l719.19-374.9a32 32 0 0 1 29.59 56.76l-719.2 374.89a31.87 31.87 0 0 1-14.76 3.63z"  p-id="1621"></path>
            <path d="M608.6 957.7a32 32 0 0 1-30.6-41.27l234.64-776.34a32 32 0 0 1 61.26 18.52L639.22 935a32 32 0 0 1-30.62 22.7zM505.92 580.44c-0.68 0-1.36 0-2.05-0.07l-381.46-24.12a32 32 0 1 1 4-63.88l381.5 24.13a32 32 0 0 1-2 63.94z" p-id="1622"></path>
            <path d="M608.14 957.32a32 32 0 0 1-30.87-23.63L475 556.82a32 32 0 1 1 61.77-16.76L639 916.93a32 32 0 0 1-22.51 39.26 31.61 31.61 0 0 1-8.35 1.13z"></path></svg>
          <span>添加导航</span>
        </button>
        <button class="btn btn-outline" id="settings-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>
          <span>设置</span>
        </button>
        <button class="btn btn-ghost" id="theme-toggle">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
        </button>
      </div>
    </header>

    <main class="main">
      <section class="search-section">
        <div class="search-container">
          <div class="clock" id="clock-display" style="display: none;">
            <div class="weather-info" style="display: none;">
              <div class="weather-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M12 3v2"></path><path d="M12 19v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path><circle cx="12" cy="12" r="5"></circle></svg>
              </div>
              <div class="weather-temp">25°C</div>
            </div>
            <div class="clock-info">
              <div class="time">00:00:00</div>
              <div class="date">2024年1月1日 星期一</div>
            </div>
          </div>
          <div class="search-box">
            <div class="search-type">
              <button class="search-type-btn">
                站内 <span class="dropdown-arrow">▾</span>
              </button>
            </div>
            <input type="search" class="search-input" placeholder="搜索AI工具、教程、资源..." autofocus>
            <button class="search-btn">搜索</button>
          </div>
          
          <div class="category-tabs">
            <button class="category-tab active">全部</button>
          </div>
          <div class="favorites-section" id="favorites-section">
            <h2 class="favorites-title">收藏夹</h2>
            <div class="favorites-container" id="favorites-container">
              <!-- 收藏的卡片将在这里动态插入 -->
            </div>
          </div>
        </div>

        <div class="main-tips">
          每日一句
        </div>

        <div class="hero-section" id="hero-section" style="display: none;">
          <h1 class="hero-title">3秒定制导航，90%操作提速</h1>
          <p class="hero-subtitle"></p>
        </div>
      </section>

      <section class="tools-section">
        <div class="tools-grid" id="tools-container">
          <!-- Tools will be dynamically inserted here -->
        </div>
      </section>
    </main>

    <!-- Settings Modal -->
    <div class="modal" id="settings-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>设置</h2>
          <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <div class="setting-item">
            <label for="show-clock">显示时钟</label>
            <input type="checkbox" id="show-clock" checked>
          </div>
          <div class="setting-item" style="display: none;">
            <label for="show-bookmarks">显示书签栏</label>
            <input type="checkbox" id="show-bookmarks" checked>
          </div>
          <div class="setting-item">
            <label>视图模式</label>
            <div class="view-mode-buttons">
              <button class="btn btn-sm" data-view-mode="card" id="card-view-btn">卡片</button>
              <button class="btn btn-sm" data-view-mode="compact" id="compact-view-btn">缩略</button>
              <button class="btn btn-sm" data-view-mode="text" id="text-view-btn">文字</button>
            </div>
          </div>
          <div class="setting-item">
            <label for="category-group">分组展示</label>
            <input type="checkbox" id="group-by-category">
          </div>
          <div class="setting-item">
            <label for="hide-slogan">隐藏Slogan</label>
            <input type="checkbox" id="hide-slogan">
          </div>
            <div class="setting-item">
            <label for="particle-density">粒子密度</label>
            <input type="range" id="particle-density" min="0" max="100" value="50">
          </div>
          <div class="setting-item">
            <label for="grid-columns">网格列数</label>
            <input type="range" id="grid-columns" min="2" max="8" value="4">
          </div>
        </div>
        <div class="modal-footer">
          <div class="btn-group">
            <button class="btn btn-ghost" id="import-data">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="M12 12v9"></path><path d="m8 17 4-4 4 4"></path></svg>
              <span>导入</span>
            </button>
            <button class="btn btn-ghost" id="export-data">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
              <span>导出</span>
            </button>
          </div>
          <button class="btn btn-primary" id="save-settings">保存</button>
          <input type="file" id="import-file" accept=".json" style="display: none;">
        </div>
      </div>
    </div>
  </div>

  <!-- 书签模态框 -->
  <div class="modal" id="bookmarks-modal">
    <div class="modal-content bookmarks-layout">
      <div class="modal-header">
        <h2>浏览器书签</h2>
        <button class="close-btn">&times;</button>
        <input id="bookmarks-input" type="text" style="display: none;" value="">
      </div>

      <div class="modal-body">
        <div class="bookmarks-sidebar">
          <div class="bookmarks-tree" id="bookmarks-tree">
            <!-- 书签文件夹树形结构将在这里动态插入 -->
          </div>
        </div>
        <div class="bookmarks-main">
          <div class="bookmarks-container" id="bookmarks-container">
            <!-- 书签列表将在这里动态插入 -->
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="btn-group">
          <button class="btn btn-ghost" id="import-all-bookmarks">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
            <span>全部导入</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 视图切换按钮 -->
  <button id="view-toggle-btn" class="floating-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>
  </button>

  <link rel="stylesheet" href="css/card-view-modes.css">
  <link rel="stylesheet" href="css/bookmarks.css">
  <link rel="stylesheet" href="css/weather.css">
  <script src="js/particles.js"></script>
  <script src="js/clock.js"></script>
  <script src="js/toast.js"></script>
  <script src="js/kv.js"></script>
  <script src="js/server.js"></script>
  <script src="js/main.js"></script>
  <script src="js/weather.js"></script>
  <script src="js/oneSentence.js"></script>
  <script src="js/bookmarks.js"></script>
</body>
</html>
